<template>
  <div class="floor-layout tpl-76">
    <div class="layout-main">
      <!-- <swiper :options="swiperOption">
        <swiper-slide v-for="(block, index) in data.blockList" :key="index">
          <layout-item
            :block="block"
            :isEdit="isEdit"
            :blockHref="blockHref(block)"
            @handle-edit="handleEditBlock(index)"/>
          <div v-if="block.block_value.img_title" class="img-text">{{block.block_value.img_title}}</div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper> -->
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: 'tpl_76',
    mixins: [mixin],
    title: '视频轮播',
    dataTpl: {
      tpl_id: 76,
      blockList: [
        { block_type: 'IMAGE', block_value: '', block_opt: '' }
      ]
    },
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          }
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .tpl-76 {
      height: 200px;
      background: url('../imgs/swiper-none.png') no-repeat center;
  }
  .layout-main {
    /deep/ .no-image {
      height: 150px;
      background: url('../imgs/swiper-none.png') no-repeat center;
      background-size: 88px 60px;
    }
  }
  .swiper-container {
    height: 100%;
    /deep/ .swiper-wrapper {
      height: 100%;
      .swiper-slide {
        position: relative;
        height: 100%;
        .img-text {
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 0 10px;
          line-height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          background: rgba(0, 0, 0, .5);
          color: #fff;
          font-size: 12px;
        }
      }
    }
    /deep/ .swiper-pagination-bullet {
      background: #CACACA;
    }
    /deep/ .swiper-pagination-bullet-active {
      background: #3870EA;
    }
  }
</style>